<template>
    <div>
        <a-modal
            :width="1048"
            :bodyStyle="{ padding: '24px 0' }"
            :title="relateType === 1 ? '关系图' : '相关系统图'"
            centered
            v-model:visible="visible"
            :footer="false"
            @cancel="visible = false"
        >
            <div v-if="detail.id">
                <guanxi-tab :detail="detail" v-if="relateType === 1" />
                <xitong-tab :detail="detail" v-if="relateType === 2" />
            </div>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import GuanxiTab from '@/views/tool/fuyongku/proDetail/components/GuanxiTab.vue';
import XitongTab from '@/views/tool/fuyongku/proDetail/components/XitongTab.vue';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        GuanxiTab,
        XitongTab
    },
    setup() {
        const state = reactive<any>({
            id: null,
            type: null, // 需求类型
            relateType: null, // 关系图类型
            detail: {},
            visible: false
        });
        const open = (id = null, relateType, type) => {
            state.detail = {};
            state.visible = true;
            state.id = id;
            state.relateType = relateType;
            state.type = type;
            getDetailData();
        };
        const getDetailData = async () => {
            const query = {
                id: state.id
            };
            const requestApi = state.type === '1' ? api.pmpRequestInfoModel.getReuseBusinessInfo : api.productRequireModel.getReuseProductInfo;
            const { success, moule } = await requestApi(query);
            if (success) {
                state.detail = { ...moule };
            }
        };
        return {
            ...toRefs(state),
            open
        };
    }
});
</script>

<style scoped>
</style>